* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
section:hover .item {
  filter: blur(10px);
  transform: scale(0.8);
  transition: filter 0.5s, transform 0.5s;
}
section .item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
section .item .a {
  color: #fff;
  font-style: italic;
  font-weight: bold;
  font-size: 10vw;
  top: 0;
  opacity: 1;
  transition: top 0.5s, opacity 0.5s;
}
section .item .a:nth-child(1) {
  position: absolute;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
}
section .item .a:nth-child(2) {
  position: relative;
  -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
section .item a {
  position: absolute;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.5s;
}
section .item:hover {
  filter: blur(0px);
  transform: scale(1);
  transition: filter 0.5s, transform 0.5s;
}
section .item:hover .a:nth-child(1) {
  top: -40px;
  opacity: 0.5;
  transform: top 0.5s, opacity 0.5s;
}
section .item:hover .a:nth-child(2) {
  top: 40px;
  opacity: 0.5;
  transform: top 0.5s, opacity 0.5s;
}
section .item:hover a {
  opacity: 1;
  transition: opacity 0.5s;
}/*# sourceMappingURL=index.css.map */